<template>
  <div>
    欢迎光临_vue开发的收银系统——水果店
    <table>
      <thead>
        <th>苹果{{ price }}￥/斤,折扣&lt;{{ discount }}折&gt;</th>
      </thead>
      <tbody>
        <tr>
          请输入你要购买的斤数
          <input type="number" v-model.lazy="num" />
        </tr>
        <tr>
          <button @click="summation">结账买单~</button>
        </tr>
        <tr>
          结帐单：总价{{
            totalPrice
          }}￥元 折后价：{{
            fairDeal
          }}￥元 省了：{{
            save
          }}
          ￥元
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
      price: 10,
      discount: 8,
      totalPrice: "0",
      fairDeal: "0",
      save: "0",
    };
  },
  methods: {
    summation(num, price, discount) {
      this.totalPrice = this.num * this.price;
      this.fairDeal = this.num * this.discount;
      this.save = this.totalPrice - this.fairDeal;
    },
  },
};
</script>

<style>
</style>